<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Devtron</title>
    <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../vendor/photon/css/photon.css">
    <link rel="stylesheet" href="../vendor/github.css">
    <link rel="stylesheet" href="devtron.css">
    <script src="../out/index.js" charset="utf-8"></script>
  </head>
  <body>

    <div class="window">
      <div class="window-content">
        <div id="pane-group" class="pane-group">
        </div>
      </div>
    </div>

    <template id="requires-table-row">
      <tr>
        <td class="row-module" data-field="moduleName"></td>
        <td class="row-version" data-field="moduleVersion"></td>
        <td class="row-size" data-field="fileSize"></td>
        <td class="row-file" data-field="pathSection">
          <span class="disclosure-arrow" data-field="disclosure"></span>
          <span data-field="fileName"></span>
          <span class="row-directory" data-field="moduleDirectory"></span>
        </td>
      </tr>
    </template>

    <template id="ipc-table-row">
      <tr>
        <td class="row-event-name">
          <div class="ipc-icon" data-field="eventIcon"></div>
          <div class="ipc-icon ipc-icon-sync" data-field="syncIcon" title="Synchronous"></div>
          <div data-field="eventName"></div>
        </td>
        <td class="row-event-listener-count" data-field="eventListenerCount"></td>
        <td class="row-event-data">
          <pre><code class="language-javascript" data-field="eventData"></code></pre>
        </td>
      </tr>
    </template>

    <template id="emitter-row">
      <tr>
        <td class="row-listener row-emitter">
          <span class="disclosure-arrow" data-field="disclosure"></span>
          <span data-field="emitterName"></span>
          <span class="listener-count" data-field="listenerCount"></span>
        </td>
      </tr>
    </template>

    <template id="event-type-row">
      <tr>
        <td class="row-listener row-listener-event-name">
          <span class="disclosure-arrow" data-field="disclosure"></span>
          <span data-field="eventName"></span>
          <span class="listener-count" data-field="listenerCount"></span>
        </td>
      </tr>
    </template>

    <template id="listener-code-row">
      <tr>
        <td class="row-listener row-listener-event-code">
          <pre><code class="language-javascript" data-field="listenerValue"></code></pre>
        </td>
      </tr>
    </template>

    <template id="rule-row">
      <tr>
        <td data-field="status"></td>
        <td data-field="severity"></td>
        <td class="row-listener row-emitter">
          <span class="disclosure-arrow" data-field="disclosure"></span>
          <span data-field="ruleName"></span>
          <span class="listener-count" data-field="elementCount"></span>
        </td>
      </tr>
    </template>

    <template id="element-row">
      <tr>
        <td></td>
        <td></td>
        <td class="row-element-path">
          <a data-field="selectorPath" href="#"></a>
        </td>
      </tr>
    </template>

    <template id="modules-view">
      <div class="pane" data-pane="graph">
        <header class="toolbar toolbar-header">
          <div class="toolbar-actions">
            <button data-field="loadButton" class="btn btn-default pull-right">
              <span class="toolbar-icon toolbar-icon-cycle"></span>
              Load Graph
            </button>
            <input data-field="searchBox" class="form-control search-box pull-right" type="text" placeholder="Search modules">
          </div>
        </header>

        <div class="tab-group">
          <div data-field="renderProcessTab" class="tab-item active">
            Renderer Process
          </div>
          <div data-field="mainProcessTab" class="tab-item">
            Main Process
          </div>
        </div>

        <div class="table-scroller table-scroller-with-tabs">
          <table data-field="renderProcessTable" class="table-striped" tabindex="-1">
            <thead>
              <th>Module</th>
              <th>Version</th>
              <th>Size</th>
              <th>File</th>
            </thead>
            <tbody data-field="renderRequireRows" tabindex="-1">
            </tbody>
          </table>

          <table data-field="mainProcessTable" class="table-striped hidden" tabindex="-1">
            <thead>
              <th>Module</th>
              <th>Version</th>
              <th>Size</th>
              <th>File</th>
            </thead>
            <tbody data-field="mainRequireRows" tabindex="-1">
            </tbody>
          </table>

          <div class="table-description" data-field="tableDescription">
            This table shows all of the JavaScript files loaded via <code>require</code>
            starting from your application's main entry point.
            <br>
            Click Load Graph to generate a require graph for the renderer process
            and the main process.
          </div>
        </div>
      </div>
    </template>

    <template id="events-view">
      <div class="pane hidden" data-pane="listeners">
        <header class="toolbar toolbar-header">
          <div class="toolbar-actions">
            <button data-field="loadButton" class="btn btn-default pull-right">
              <span class="toolbar-icon toolbar-icon-cycle"></span>
              Load Listeners
            </button>
            <input data-field="searchBox" class="form-control search-box pull-right" type="text" placeholder="Search events">
          </div>
        </header>

        <div class="table-scroller">
          <table class="table-striped" tabindex="-1">
            <thead>
              <th>Event Listeners</th>
            </thead>
            <tbody data-field="listenersTable" tabindex="-1">
            </tbody>
          </table>

          <div class="table-description" data-field="tableDescription">
            This table shows the event names and listeners currently registered
            on core Electron and node.js APIs.
            <br>
            Click Load Listeners to populate it.
          </div>
        </div>
      </div>
    </template>

    <template id="ipc-view">
      <div class="pane hidden" data-pane="ipc">
        <header class="toolbar toolbar-header">
          <div class="toolbar-actions">
            <div class="btn-group pull-right">
              <button data-field="recordButton" class="btn btn-default" title="Record IPC events">
                <span class="toolbar-icon toolbar-icon-record"></span>
                Record
              </button>
              <button data-field="hideInternalButton" class="btn btn-default" title="Ignore internal IPC events">
                <span class="toolbar-icon toolbar-icon-funnel"></span>
                Ignore Internal
              </button>
              <button data-field="clearButton" class="btn btn-default" title="Clear events from table">
                <span class="toolbar-icon toolbar-icon-block"></span>
                Clear
              </button>
              <button data-field="docsButton" class="btn btn-default" title="Open Electron IPC docs">
                <span class="toolbar-icon toolbar-icon-book"></span>
                Docs
              </button>
            </div>
            <input data-field="searchBox" class="form-control search-box pull-right" type="text" placeholder="Search events">
          </div>
        </header>

        <div class="table-scroller">
          <table class="table-striped" tabindex="-1">
            <thead>
              <th>Channel</th>
              <th>Listeners</th>
              <th>Arguments</th>
            </thead>
            <tbody data-field="ipcTable">
            </tbody>
          </table>

          <div class="table-description" data-field="tableDescription">
            This table shows the inter-process communication (IPC) events sent
            and received between the renderer process and the main process.
            <br>
            Click Record to start monitoring and displaying IPC traffic.
          </div>
        </div>
      </div>
    </template>

    <template id="accessibility-view">
      <div class="pane hidden" data-pane="accessibility">
        <header class="toolbar toolbar-header">
          <div class="toolbar-actions">
            <div class="btn-group pull-right">
              <button data-field="accessibilityButton" class="btn btn-default">
                <span class="toolbar-icon toolbar-icon-cycle"></span>
                Audit App
              </button>
              <button data-field="docsButton" class="btn btn-default" title="Open accessibility docs">
                <span class="toolbar-icon toolbar-icon-book"></span>
                Docs
              </button>
            </div>
            <input data-field="searchBox" class="form-control search-box pull-right" type="text" placeholder="Search events">
          </div>
        </header>

        <div class="table-scroller">
          <table class="table-striped accessibility-table" tabindex="-1">
            <thead>
              <th>Status</th>
              <th>Severity</th>
              <th>Accessibility</th>
            </thead>
            <tbody data-field="accessibilityResultsTable" tabindex="-1">
            </tbody>
          </table>

          <div class="table-description" data-field="tableDescription">
            This pane shows errors and warnings from elements that do
            not meet accessibility standards.
            <br>
            Click Audit App to inspect the running application.
          </div>
        </div>
      </div>
    </template>

    <template id="lint-view">
      <div class="pane hidden" data-pane="lint">
        <header class="toolbar toolbar-header">
          <div class="toolbar-actions">
            <button data-field="lintButton" class="btn btn-default pull-right">
              <span class="toolbar-icon toolbar-icon-cycle"></span>
              Lint App
            </button>
          </div>
        </header>

        <div class="table-scroller">
          <table class="table-striped lint-table" tabindex="-1">
            <thead>
              <th>Lint Checks</th>
            </thead>
            <tbody>
              <tr>
                <td data-field="outdated" class="alert hidden" role="alert">
                  <p>
                    <span class="lint-icon"></span>
                    <strong class="lint-title">Using latest Electron version</strong>
                  </p>
                  <p data-field="outdatedDescription">
                    Your application is using version <span data-field="versionLabel"></span>
                    and the latest version released is <span data-field="latestLabel"></span>.
                    View the <a href="http://electron.atom.io/releases.html">Electron release notes</a>.
                  </p>
                </td>
              </tr>

              <tr>
                <td data-field="usingAsar" class="alert hidden" role="alert">
                  <p>
                    <span class="lint-icon"></span>
                    <strong class="lint-title">Using an asar archive</strong>
                  </p>
                  <p data-field="asarDescription">
                    Your application is not bundled in an <code>.asar</code> archive.
                    Asar bundles your entire application into a single file which
                    makes your app quicker to install/update as well as improves the
                    code loading performance in many environments. View the <a href="http://electron.atom.io/docs/tutorial/application-packaging">asar instructions</a>.
                  </p>
                </td>
              </tr>

              <tr>
                <td data-field="crashListener" class="alert hidden" role="alert">
                  <p>
                    <span class="lint-icon"></span>
                    <strong class="lint-title">Listening for crash events</strong>
                  </p>
                  <p data-field="crashDescription">
                    Your application is not listening for the <code>crashed</code> event on
                    the <code>webContents</code> property of the <code>BrowserWindow</code>.
                    It is important to listen for this event to report when it happens
                    and notify the user about what happened. View the <a href="http://electron.atom.io/docs/api/web-contents/#event-crashed"><code>webContents</code> docs</a>.

                    <br><br>
                    Listen for this event by adding the following to the <code>webContents</code>:
                    <pre class="lint-code "><code class="language-javascript" data-field="crashedExample">myWindow.webContents.on('crashed', function () { })</code></pre>
                  </p>
                </td>
              </tr>

              <tr>
                <td data-field="unresponsiveListener" class="alert hidden" role="alert">
                  <p>
                    <span class="lint-icon"></span>
                    <strong class="lint-title">Listening for unresponsive events</strong>
                  </p>
                  <p data-field="unresponsiveDescription">
                    Your application is not listening for the <code>unresponsive</code> event on
                    the <code>BrowserWindow</code>. It is important to listen for this
                    event to report when it happens and to notify the user about what
                    has happened. View the <a href="http://electron.atom.io/docs/api/browser-window/#event-unresponsive"><code>BrowserWindow</code> docs</a>.

                    <br><br>
                    Listen for this event by adding the following to the <code>BrowserWindow</code>:
                    <pre class="lint-code"><code class="language-javascript" data-field="unresponsiveExample">myWindow.on('unresponsive', function () { })</code></pre>
                  </p>
                </td>
              </tr>

              <tr>
                <td data-field="uncaughtListener" class="alert hidden" role="alert">
                  <p>
                    <span class="lint-icon"></span>
                    <strong class="lint-title">Listening for uncaughtException events</strong>
                  </p>
                  <p data-field="uncaughtDescription">
                    Your application is not listening for the <code>uncaughtException</code>
                    event on the main <code>process</code>. Electron shows a dialog with a
                    stack trace by default if you do not provide a listener for this event.
                    It is important to listen for this event to report when it happens
                    and possibly notify the user about what has happened. View the <a href="https://nodejs.org/api/process.html#process_event_uncaughtexception"><code>process</code> docs</a>.

                    <br><br>
                    Listen for this event by adding the following to the main <code>process</code>:
                    <pre class="lint-code"><code class="language-javascript" data-field="uncaughtExample">process.on('uncaughtException', function () { })</code></pre>
                  </p>
                </td>
              </tr>
            </tbody>
          </table>

          <div class="table-description" data-field="tableDescription">
            This pane shows warnings about potential issues or missing
            functionality in your application.
            <br>
            Click Lint App to inspect the running application.
          </div>
        </div>
      </div>
    </template>

    <template id="about-view">
      <div class="pane hidden" data-pane="about">
        <header class="toolbar toolbar-header">
          <div class="toolbar-actions">
            <button data-field="issueButton" class="btn btn-default pull-right">
              <span class="toolbar-icon toolbar-icon-bug"></span>
              Report Issue
            </button>
          </div>
        </header>

        <div class="padded table-scroller">
          <h3>Devtron <small data-field="versionLabel"></small></h3>
          <p>A DevTools extension for Electron</p>
          <p><a href="https://github.com/electron/devtron">https://github.com/electron/devtron</a></p>

          <h4>Keyboard Shortcuts</h4>

          <h5>Panes</h5>
          <div class="keybinding"><kbd>Alt + Up Arrow</kbd> &mdash; Navigate to previous pane</div>
          <div class="keybinding"><kbd>Alt + Down Arrow</kbd> &mdash; Navigate to next pane</div>
          <div class="keybinding"><kbd>Ctrl + E / Cmd + E</kbd> &mdash; Reload the pane</div>

          <h5>Tables</h5>
          <div class="keybinding"><kbd>Left Arrow</kbd> &mdash; Collapse selected item</div>
          <div class="keybinding"><kbd>Right Arrow</kbd> &mdash; Expand selected item</div>
          <div class="keybinding"><kbd>Up Arrow</kbd> &mdash; Select previous item</div>
          <div class="keybinding"><kbd>Down Arrow</kbd> &mdash; Select next item</div>

          <h4>Chrome APIs</h4>

          <ul>
            <li>Tab ID: <span data-field="tabID"></span></li>
            <li>Runtime ID: <span data-field="runtimeID"></span></li>
          </ul>

          <p>
            This is the list of Chrome DevTools Extension APIs currently implemented by Electron.
            <a href="https://developer.chrome.com/extensions/devtools">View the docs.</a>
          </p>
          <pre data-field="chromeAPIs"></pre>

        </div>
      </div>
    </template>

    <template id="sidebar-view">
      <div class="pane pane-sm sidebar">
        <ul class="list-group">
          <li class="list-group-item active" data-field="requireLink" data-pane-link="graph">
            <div class="sidebar-icon sidebar-icon-graph"></div>
            Require Graph
          </li>
          <li class="list-group-item" data-field="eventsLink" data-pane-link="listeners">
            <div class="sidebar-icon sidebar-icon-events"></div>
            Event Listeners
          </li>
          <li class="list-group-item" data-field="ipcLink" data-pane-link="ipc">
            <div class="sidebar-icon sidebar-icon-ipc"></div>
            IPC
          </li>
          <li class="list-group-item" data-field="lintLink" data-pane-link="lint">
            <div class="sidebar-icon sidebar-icon-lint"></div>
            Lint
          </li>
          <li class="list-group-item" data-field="accessibilityLink" data-pane-link="accessibility">
            <div class="sidebar-icon sidebar-icon-accessibility"></div>
            Accessibility
          </li>
          <li class="list-group-item" data-field="aboutLink" data-pane-link="about">
            <div class="sidebar-icon sidebar-icon-about"></div>
            About
          </li>
        </ul>
      </div>
    </template>

    <template id="node-integration-view">
      <div class="pane" data-pane="nodeIntegration">
        <div class="padded node-integration-view">
          <h3 class="error-heading">Node Integration Disabled</h3>
          <p>
            It appears that this <code>BrowserWindow</code> was created with
            <code>nodeIntegration</code> set to <code>false</code>.
          </p>

          <p>
            Devtron accesses Electron APIs via <code>require</code> so you will
            need to expose <code>require</code> and <code>process</code> via a
            preload script in order to use Devtron.
          </p>

          <p>
            You can specify a preload script to the <code>BrowserWindow</code> constructor:
          </p>

          <pre class="lint-code"><code class="language-javascript" data-field="browserWindowExample">var window = new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, 'preload.js')
  }
})</code></pre>

          <p>
            Then add the following to the <code>preload.js</code> script:
          </p>

          <pre class="lint-code"><code class="language-javascript" data-field="devtronExample">window.__devtron = {require: require, process: process}</code></pre>

          </p>
            You may want to guard the previous code block with a <code>NODE_ENV</code>
            check so that these variables are only exposed during development:
          </p>

            <pre class="lint-code"><code class="language-javascript" data-field="envCheckExample">if (process.env.NODE_ENV === 'development')</code></pre>

          <p>
            Restart your application once you've configured this preload script
            and Devtron should then be enabled for your app.
          </p>
        </div>
      </div>
    </template>

  </body>
</html>
